<template>
  <div class="container">
    <table style="width=100%" border="solid">
      <!-- 行 -->
      <tr>
        <!-- 列 -->
        <th>
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :show-file-list="false"
            :http-request="uploadImage"
            :before-upload="beforeAvatarUpload"
          >
            <el-tooltip placement="left">
              <div slot="content">点击更新头像</div>
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-tooltip>
          </el-upload>
        </th>
        <th>
          <div class="userBasic">
            <span> 用户: </span>
            <el-input class="user-input" v-model="user.name" disabled />
          </div>

          <div class="userBasic">
            <span> 角色: </span>
            <el-input class="user-input" v-model="user.role" disabled />
          </div>

          <div class="userBasic">
            <span> 手机: </span>
            <el-input class="user-input" v-model="user.mobilePhone" disabled />
          </div>
        </th>
      </tr>
      <tr>
        <th colspan="2">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input class="passwd-input" v-model="ruleForm.oldPassword" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input class="passwd-input" v-model="ruleForm.newPassword" />
            </el-form-item>
            <el-form-item label="确认密码" prop="newPasswordAgain">
              <el-input
                class="passwd-input"
                v-model="ruleForm.newPasswordAgain"
              />
            </el-form-item>
            <el-form-item style="float: left">
              <el-button
                type="primary"
                style="margin-right: 18px"
                @click="submitForm('ruleForm')"
                >修改密码</el-button
              >
              <el-button style="margin-left: 18px" @click="resetForm"
                >重置输入</el-button
              >
            </el-form-item>
          </el-form>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
import { updateAvatar, updatePassword } from "@/api/common";
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          accountId: "",
          name: "",
          role: "",
          avatar: "",
          mobilePhone: "",
        };
      },
    },
  },
  data() {
    var checkPassword = (rule, value, callback) => {
      // eslint-disable-next-line eqeqeq
      if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次密码不一样，请重新输入"));
      } else {
        callback();
      }
    };
    return {
      imageUrl: "",

      ruleForm: {
        oldPassword: "",
        newPassword: "",
        newPasswordAgain: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        newPasswordAgain: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    uploadURL() {
      return "";
    },
  },
  created() {
    this.open();
  },
  methods: {
    submitForm(formName) {
      console.log("aaaa", formName);
      this.$refs.ruleForm.validate((valid) => {
        console.log("aaaa", valid);
        if (valid) {
          console.log("执行操作");
          this.changePassword();
        } else {
          this.$message.error("两次密码输入不一致");
        }
      });
    },
    changePassword() {
      console.log("hehehhehehehe");
      const data = {
        prePassword: this.ruleForm.oldPassword,
        currentPassword: this.ruleForm.newPassword,
        accountId: this.user.accountId,
      };
      console.log(data);
      //     console.log(valid)
      updatePassword(data).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.resetForm();
        }
      });
    },
    resetForm() {
      this.$refs["ruleForm"].resetFields();
    },

    // 打开界面的时候
    open() {
      this.imageUrl = this.user.avatar;
    },
    uploadImage(f) {
      console.log(f);
      const formdata = new FormData();
      formdata.append("avatar", f.file);
      // const config = {
      //   headers: { "Content-Type": "multipart/form-data" },
      // };
      formdata.append("accountId", this.user.accountId);
      formdata.append("imgUrl", this.imageUrl);
      updateAvatar(formdata).then((res) => {
        console.log("@file", res.data);
        this.imageUrl = res.data;
        this.$store.commit("user/SET_AVATAR", res.data);
        console.log(res);
        if (res.code !== 200) {
          this.$message.error("上传失败，请重试");
        } else {
          this.$message.success("上传成功");
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const _name = file.name;
      const _index = _name.lastIndexOf(".");
      const _imgType = _name.substring(_index);

      const isImageLegal =
        _imgType == ".jpg" ||
        _imgType == ".jpeg" ||
        _imgType == ".png" ||
        _imgType == ".PNG" ||
        _imgType == ".gif" ||
        _imgType == ".GIF";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImageLegal) {
        this.$message.error(`图片格式仅支持.png、.jpg、.jpeg、.gif!`);
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImageLegal && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .userBasic {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    .user-input {
      width: auto;
      margin-left: 5px;
    }
  }
  .passwd-input {
    float: left;
    width: 80%;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 176px;
  height: 176px;
  line-height: 176px;
  text-align: center;
}
.avatar {
  width: 176px;
  height: 176px;
  display: block;
}
</style>
